<html>
<head>
  <meta charset="utf-8" />
  <meta name="format-detection" content="telephone=no" />
  <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
  <link rel="stylesheet" type="text/css" href="css/libs/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="css/libs/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <link rel="stylesheet" type="text/css" href="css/components.css" />
  <link rel="stylesheet" type="text/css" href="css/art-gallery.css" />
  <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
  <meta name="msapplication-tap-highlight" content="no" />
  <title>The Opinionator</title>
</head>
<body>
  <!-- NAVIGATION START -->
  <div class="navigation" id="nav">
    <div class="three-div-icon">
      <span class="aric">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </span>
      <img class="navlogo" src="img/nav-bar-logo.png">
      <img class="back-button" src="img/icons/arrow_back-01.svg" alt="">
    </div>
    <div class="title"><span></span><img src="img/nav-bar-logo.png"></div>
    <div class="small-sig">
      <img src="img/icons/scan-01.svg" alt="">
    </div>
    <div class="navigation-container">
      <ul class="nav navbar-nav navbar-left top-nav">
        <li><a href="#" class="active mn-local" data-item="local">Local</a></li>
        <li><a href="#" class="mn-favorites" data-item="favorites">My Favourites</a></li>
        <li><a href="#" class="mn-about" data-item="about">About</a></li>
        <li><a href="#" class="mn-on-boarding" data-item="onBoarding">App Tour</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-left terms-cond-link">
        <li><a href="#" class="active mn-terms" data-item="terms">Terms & Conditions</a></li>
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    <!-- HOME SPLASH -->
    <section id="home">
      <div class="row">
        <div class="col-sm-12">
          <img src="" alt="">
          <h1 class="opinion-title"></h1>
          <h3 class="opinion-sub"></h3>
        </div>
      </div>
    </section>
    <!-- ON BOARDING-TUTORIAL SECTION START -->
    <section id="on-boarding">
      <div class="row">
        <div class="col-sm-12" style="padding-right:0;">
          <div id="on-boarding-carousel" class="carousel slide">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
                <h3 class="slide-id">Step 1</h3>
                <h2 class="title" data-index="0">Opinionator knows<br/>what's around you</h2>
                <img src="" alt="" class="bg-img-carousel">
                <div class="signal out1">
                  <div class="signal middle1">
                    <div class="signal in1">
                      <div class="signal dot1"></div>
                    </div>
                  </div>
                </div>
                <p class="sub-description">Tap this button to load<br/>items near you</p>
              </div>
              <div class="item step2" data-index="1">
                <h3 class="slide-id">Step 2</h3>
                <h2 class="title">Click on an item to<br/>start opionionating</h2>
                <img src="img/animation-local.gif" alt="" class="bg-img-carousel gif-animation" style="margin:10% auto;">
              </div>
              <div class="item step3" data-index="2">
                <h3 class="slide-id">Step 3</h3>
                <h2 class="title">Swipe to view items<br/>and opinions</h2>
                <img src="img/animations-swipe.gif" alt="" class="bg-img-carousel gif-animation" style="margin:10% auto;">
                <p class="sub-description">Swipe to view opinions</p>
              </div>
              <div class="item" data-index="3">
                <h3 class="slide-id">Step 4</h3>
                <h2 class="title">Save your opinion.<br/> Save as Favourite<br/>or Share</h2>
                <img src="img/step-4-icons.png" alt="" class="bg-img-carousel" style="margin: 20% auto;">
                <p class="sub-description">Use these buttons to<br/>participate in the fun</p>
              </div>
              <div class="item" data-index="4">
                <h3 class="slide-id">Step 5</h3>
                <h2 class="title">That's all there<br/>is to it!</h2>
                <img src="" alt="" class="bg-img-carousel">
                <div class="get-opinionated-button">
                  <p>Get Opinionated</p>
                </div>
              </div>
            </div>
            <!-- Indicators -->
            <div class="on-boarding-nav">
              <a href="#" class="carPrev"><img src="img/icons/icons-24px-arrow-prev-white.svg" style="width:20px;" alt=""><p>Skip</p></a>
              <ol class="carousel-indicators">
                <li data-target="#on-boarding-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#on-boarding-carousel" data-slide-to="1"></li>
                <li data-target="#on-boarding-carousel" data-slide-to="2"></li>
                <li data-target="#on-boarding-carousel" data-slide-to="3"></li>
                <li data-target="#on-boarding-carousel" data-slide-to="4"></li>
              </ol>
              <a href="#"  class="carNext" ><img src="img/icons/icons-24px-arrow-next-white.svg" style="width:20px;" alt=""></a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- SELECT THE SECTION AROUND YOU START -->
    <section id="local">
      <div class="row">
        <div class="col-sm-4 col-sm-offset-4 local-container"></div>
      </div>
    </section>

    <section id="search-ble">
      <div class="signal out">
        <div class="signal middle">
          <div class="signal in">
            <div class="signal dot"></div>
          </div>
        </div>
      </div>
      <h3 class="loading-text">Searching for nearby<br/>artworks</h3>
    </section>

    <!-- VIEWING ART PIECES AND CAPTIONS SECTION START-->
    <section id="art-pieces-viewing">

      <div id="art-gallery">
        <div class="container">

          <div class="img-cap-container item item1">
            <div class="image">
              <img src="">
            </div>
            <div class="image-caption">
              <div class="cap-container">
                <div class="cap1 cap"><p></p></div>
                <div class="cap2 cap"><p></p></div>
              </div>
            </div>
            <i class="fa fa-ellipsis-h"></i>
          </div>

          <div class="img-cap-container item item2">
            <div class="image">
              <img src="">
            </div>
            <div class="image-caption">
              <div class="cap-container">
                <div class="cap1 cap"><p></p></div>
                <div class="cap2 cap"><p></p></div>
              </div>
            </div>
            <i class="fa fa-ellipsis-h"></i>
          </div>

          <div class="img-cap-container item item3">
            <div class="image">
              <img src="">
            </div>
            <div class="image-caption">
              <div class="cap-container">
                <div class="cap1 cap"><p></p></div>
                <div class="cap2 cap"><p></p></div>
              </div>
            </div>
            <i class="fa fa-ellipsis-h"></i>
          </div>

        </div>
      </div>

      <div class="share-content-container">
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-12">
              <div class="col-xs-3 box">
                <img class='bt-fav' src="img/icons/icons-24px-favourite-default.svg" alt="">
              </div>
              <div class="col-xs-6 mid-box">
                <img class='bt-add-caption' src="img/icons/icons-24px-nav-add.svg" alt=""><p>Add your opinion</p>
              </div>
              <div class="col-xs-3 box">
                <img class='bt-share' src="img/icons/icons-24px-share.svg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ABOUT SECTION START-->
    <section id="about">
      <div class="container-fluid">
        <h1>About</h1>
        <h2 class="subhead">Brisket Strip Steak</h2>
        <p>Bacon ipsum dolor sit amet tongue ullamco commodo, dolore pig andouille nostrud short ribs nulla shankle tail do jowl. Pork chop ball tip ham hock boudin non meatball filet mignon ut spare ribs shankle officia. Porchetta brisket eu hamburger sirloin, non reprehenderit dolor ex meatball ball tip pork loin nulla. Strip steak shankle sint ea excepteur pork pork belly ut, aliqua doner labore ribeye culpa commodo. Excepteur sint tenderloin t-bone reprehenderit et. Frankfurter tail swine ullamco. Eu incididunt exercitation shank, strip steak tenderloin et in sausage mollit ut irure anim pork chop aliqua.</p>

        <p>Voluptate corned beef ut, meatloaf hamburger shankle ground round sed bacon in fugiat short ribs magna. Laboris pork belly jerky capicola velit. Et jowl tongue consequat, veniam tempor landjaeger pancetta shank. Brisket nulla est, shank pork chop bresaola cupidatat bacon adipisicing andouille excepteur sausage. Ea shankle minim esse, beef ribs ball tip spare ribs exercitation velit tempor occaecat. Pork loin enim shank andouille, pork chop fugiat ex bresaola do veniam jowl nulla spare ribs ham hock qui.</p>

        <h2 class="subhead">Pastrami swine ball</h2>
        <p>Pastrami non ball tip swine do in chuck. Non dolore bresaola laboris fatback nulla spare ribs. Leberkas doner beef ribs laborum. Filet mignon aute salami bresaola adipisicing tempor proident ham incididunt frankfurter beef est excepteur. Rump shoulder drumstick excepteur et kielbasa qui. Meatball drumstick pork tri-tip ball tip occaecat excepteur. Do porchetta tongue, fatback cow strip steak ribeye fugiat pork chop in sausage shoulder commodo.</p>
      </div>
    </section>

    <!-- USERS FAVOURITES SECTION START -->
    <section id="favorites">
      <div class="fav-cont">
        <img src="http://placehold.it/360x150" alt="">
        <img src="img/icons/icons-24px-favourite-add_my_opinion.svg" class="opinion-marker" alt="">
        <p class="cap-text">I am the text that is apart of the image that i have favourited and i am the full length not the cut off version.</p>
      </div>
      <div class="fav-cont">
        <img src="http://placehold.it/360x150" alt="">
        <img src="img/icons/icons-24px-favourite-add_my_opinion.svg" class="opinion-marker" alt="">
        <p class="cap-text">I am the text that is apart of the image that i have favourited and i am the full length not the cut off version.</p>
      </div>
    </section>

    <section id="add-caption" style="display: none;">
      <div class="navigation" id="nav">
        <div class="three-div-icon bt-close" style="margin-top:0px;">
          <img src="img/icons/arrow_back-01.svg" alt="">
        </div>
        <div class="title-add-cap">Add Your Opinion</div>
        <div class="small-sig bt-add">ADD
          <img src="img/icons/icons-24px-nav-add.svg" alt="">
        </div>
      </div>
     <!--  <button class="bt-close">X</button>
      <span>Your Opinion</span>
      <button class="bt-add">ADD</button> -->
      <div>
        <textarea id="text" type="text" name="input-caption" maxlength="140" rows="5" cols="30" class="add-caption-text" autofocus></textarea>
      </div>
      <div class="counter"></div>
    </section>

    <!-- TERMS AND CONDITIONS SECTION START -->
    <section id="terms">
      <div class="container-fluid">
        <h1>terms</h1>
        <h2 class="subhead">Pastrami swine ball</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, facilis necessitatibus eius, sit suscipit alias dolorem voluptate dicta explicabo placeat eos ducimus adipisci consequatur dignissimos quo tempora. Obcaecati, dolorum, fugit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, ut eveniet, aperiam in quam debitis distinctio eaque consectetur et natus placeat laudantium voluptas totam soluta est ipsum iure! At, accusamus.</p>
        <h2 class="subhead">Pastrami swine ball</h2>
        <p>Pastrami non ball tip swine do in chuck. Non dolore bresaola laboris fatback nulla spare ribs. Leberkas doner beef ribs laborum. Filet mignon aute salami bresaola adipisicing tempor proident ham incididunt frankfurter beef est excepteur. Rump shoulder drumstick excepteur et kielbasa qui. Meatball drumstick pork tri-tip ball tip occaecat excepteur. Do porchetta tongue, fatback cow strip steak ribeye fugiat pork chop in sausage shoulder commodo.</p>
        <p>Voluptate corned beef ut, meatloaf hamburger shankle ground round sed bacon in fugiat short ribs magna. Laboris pork belly jerky capicola velit. Et jowl tongue consequat, veniam tempor landjaeger pancetta shank. Brisket nulla est, shank pork chop bresaola cupidatat bacon adipisicing andouille excepteur sausage. Ea shankle minim esse, beef ribs ball tip spare ribs exercitation velit tempor occaecat. Pork loin enim shank andouille, pork chop fugiat ex bresaola do veniam jowl nulla spare ribs ham hock qui.</p>
      </div>
    </section>

  </div>


  <!-- <div class="img-cap-container" data-key="<%= key %>">
</div> -->
<script type="text/template" id="art-gallery">
<div class="image">
<img itemprop="image" src="<%= image_url %>">
</div>
<div class="image-caption">
<div class="caps">
<ul>
<%_.each(captions, function(cap){%>
  <li itemprop="decsription" data-key="<%= cap.key %>" data-id="<%= cap.key %>"><%= cap.text %></li>
  <% });%>
</ul>
</div>
</div>
</script>

<script type="text/template" id="tpl-local-item">
<div class="section-details">
<div class="section-image">
<img src="<%=img_url%>" alt="placeholder">
</div>
<div class="local-title-section">
<div class="col-xs-10">
<h1><%=name%></h1>
</div>
<div class="col-xs-2">
<i class="fa fa-star"></i>
</div>
</div>
</div>
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
<!-- <script type="text/javascript" src="cordova.js"></script> -->
<script type="text/javascript" src="js/libs/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/libs/underscore-min.js"></script>
<script type="text/javascript" src="js/libs/backbone-min.js"></script>
<script type="text/javascript" src="js/libs/jquery.mobile.custom.min.js"></script>
<script type="text/javascript" src="js/libs/jquery.touchSwipe.js"></script>
<script type="text/javascript" src="js/libs/bootstrap.min.js"></script>
<script type="text/javascript" src="js/utils/jquery.input.counter.js"></script>
<script src="js/libs/CSSPlugin.min.js"></script>
<script src="js/libs/EasePack.min.js"></script>
<script src="js/libs/TweenLite.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/models/models.js"></script>
<script type="text/javascript" src="js/collections/collections.js"></script>
<script type="text/javascript" src="js/controllers/main.js"></script>
<script type="text/javascript" src="js/utils/ble.js"></script>
<script type="text/javascript" src="js/views/about.js"></script>
<script type="text/javascript" src="js/views/add-caption.js"></script>
<script type="text/javascript" src="js/views/art-list.js"></script>
<script type="text/javascript" src="js/views/art-gallery.js"></script>
<script type="text/javascript" src="js/views/favorites.js"></script>
<script type="text/javascript" src="js/views/local.js"></script>
<script type="text/javascript" src="js/views/on-boarding.js"></script>
<script type="text/javascript" src="js/views/home.js"></script>
<script type="text/javascript" src="js/views/nav.js"></script>
<script type="text/javascript" src="js/views/search-ble.js"></script>
<script type="text/javascript" src="js/views/terms.js"></script>

<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
